<!---
按组件拆分、重构
Develped by Leo on 2023.9.24
-->
<template> 
    <el-tabs v-model="state.currentTab" class="center-tabs"    :stretch="true">
      <el-tab-pane label="组件属性" name="field">
        <div class="field-box">
            <!-- 组件属性 -->
            <el-form v-show="state.currentTab === 'field' && showField" size="small" label-width="80px">
             
              <GeneralPropertyPanel :data="props.activeData" :could-change-require="props.couldChangeRequire"></GeneralPropertyPanel>

              <el-alert v-if="activeData.description" type="info">{{ activeData.description }}</el-alert>
             
            </el-form>
        </div>
      </el-tab-pane>

<!--      <el-tab-pane label="表单属性" name="form">-->
<!--        <FormPropertyPanel :form-conf="props.formConf"></FormPropertyPanel>-->
<!--      </el-tab-pane>-->
    </el-tabs>
    
</template>
<script setup>
import { defineAsyncComponent, reactive,computed,watch  } from 'vue'
const props = defineProps(['showField', 'activeData', 'formConf', 'couldChangeRequire', 'list'])
const FormPropertyPanel = defineAsyncComponent(() => import('./form.vue'))
const GeneralPropertyPanel = defineAsyncComponent(() => import('./general.vue'))

const state = reactive({
  currentTab: 'field',
  data: {},
  name: 'el-button',
   
}) 
 

</script>

<style lang="scss">


.document-link {
  position: absolute;
  display: block;
  width: 26px;
  height: 26px;
  top: 0;
  left: 0;
  cursor: pointer;
  background: #409eff;
  z-index: 1;
  border-radius: 0 0 6px 0;
  text-align: center;
  line-height: 26px;
  color: #fff;
  font-size: 18px;
}
.node-label {
  font-size: 14px;
}
.node-icon {
  color: #bebfc3;
}
</style>
